<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
	content="width=device-width, initial-scale=0.55, maximum-scale=0.55
	, user-scalable=0" />
<meta charset="UTF-8">
<title id="title"></title>
</head>
<script src="../js/jquery-2.1.4.js" type="text/javascript"></script>
<script src="../js/doT.min.js" type="text/javascript"></script>
<script type="text/javascript">
	function loadJson(json) {
		$("#title").html(json.sharePhoto.sharePhotoName);
		var tempFn = doT.template($("#images_template").html());
		var resultText = tempFn(json);
		$("#content").html(resultText);
	};
</script>
<script id="images_template" type="text/template">
		<div class="head">
			<img  src="{{=it.ossUrl}}{{=it.sharePhoto.userId}}.png">
			<div class="notename">
				<span>{{=it.sharePhoto.sharePhotoName}}</span>
				<div class="username">{{=it.sharePhoto.userName}}</div>
			</div>
			<span class="right">{{=it.createTime}}</span>

		</div>

		  {{~it.sharePhoto.items : value : index}}
		<div class="single">
			<img src="{{=it.ossUrl}}{{=value.image}}"/>
<div class="space"></div>

<div class="textinfo">
			<p>{{=value.introduction}}</p>

			<div class="location">
				<img src="../images/location.png"><span class="left">{{=it.sharePhoto.placeName}}</span>

			</div>

</div>

		</div>	

  {{~}}
</script>
<style type="text/css">
img{display:block;}
.space{
	height:22px;
	background: #fff;
}
body {
	margin:0px;
	background: #FFF;
	font-family: "Microsoft YaHei";
	width: 100%;
	font-family: "Helvetica";
}

.single {
	margin-bottom: 20px;
	border-bottom: 1px solid #CCCCCC;
}

.single>img {
	width: 100%;
}
/*
margin是实现垂直居中的重要方式。
*/
.container {
	margin: 0 0;
	text-align: center;
	width: 100%;
	clear: both;
	background:  #F3F3F3;
}

.head {
	margin: 0 auto;
	margin-bottom: 0px;
	width: 100%; /*只有设置宽和高margin才起作用*/
	height: 110px;
	background: #F3F3F3;
	position: relative;
}

.head img {
	float: left;
	margin-left: 20px;
	margin-top: 18px;
	height: 74px;
	width: 74px;
}

.notename {
	float: left;
	font-size:26px;
	margin-left: 20px;
	margin-top: 22px;
	text-align: left;
}

.right {
	font-size:18px;
	position:absolute;
	top: 64px;
	right:30px;
    color:#999999;
}

.left {
	font-size: 18px;
	float: left;
	margin-left: 12px;
}

p {
    line-height:100%;
	font-size: 1.3em;
	margin-left: 33px;
	margin-right: 33px;
	margin-bottom:22px;
	margin-top:0px;
	text-align: left;
}
.textinfo{
background:#fff;
}
.username {
	font-size: 20px;
	margin-left: 0px;
	margin-top:8px;
	color:#999999;
}

.location {
	text-align: center;
	margin-left: 30px;
	margin-right: 30px;
	height: 66px;
	border-top: 1px solid #CCCCCC;
}

.location img {
	float: left;
	position: relative;
	top: 30%;
}

.location span {
	line-height: 66px;
	font-size: 22px;
	margin-top: 0px
}
</style>
<body>
	<div class="container" id="content"></div>
	<script type="text/javascript">
		loadJson('{{#json}}');
	</script>
</body>

</html>